iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
Modern Web

Angular初期筆記系列 第 28

DAY28-Angular6之RxJS-實作2

  • 分享至 

  • xImage
  •  

Subject

Subject 是一種特殊類型的 Observable,它允許將值 傳播 到許多 Observable。Subjects 就像 EventEmitters。
https://rxjs-dev.firebaseapp.com/api/index/class/Subject

Subject 就像是「後給值的 Observable」

可以參考
https://ithelp.ithome.com.tw/articles/10188677

component.ts
-----
subjectValue ;

ngOnInit() {
    let subject = new Subject();
    let observer = {
        next: value => this.subjectValue = value,
    }
    subject.subscribe(observer);
    subject.next(1);
}
component.html
-----
subjectValue:{{subjectValue}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181107/2010775497TuqbNpFn.png

BehaviorSubject

Subject的變體,需要初始值並在訂閱時 emits(中文:發射) 其當前值。
https://rxjs-dev.firebaseapp.com/api/index/class/BehaviorSubject

需要初始值,並 保存 變化後的值

component.ts
-----
behaviorSubjectValue = '' ;

ngOnInit() {
    let behaviorSubject = new BehaviorSubject(1);
    let observerB = {
    next: value => this.behaviorSubjectValue += String(value) + '+',
    }
    let observerC = {
    next: value => this.behaviorSubjectValue += String(value + 100),
    }
    behaviorSubject.subscribe(observerB);
    behaviorSubject.next(3);
    behaviorSubject.next(1);
    behaviorSubject.next(10);
    behaviorSubject.subscribe(observerC);
}
component.html
-----
behaviorSubjectValue:{{behaviorSubjectValue}}

顯示
https://ithelp.ithome.com.tw/upload/images/20181107/20107754cNxV4SkzAg.png

concat

創建一個輸出的 Observable,它順序地從給定的Observable中發出所有值,然後繼續前進到下一個。
https://rxjs-dev.firebaseapp.com/api/index/function/concat

component.ts
-----
ngOnInit() {
    const timer1 = interval(1000).pipe(take(10));
    const timer2 = interval(2000).pipe(take(6));
    const timer3 = interval(500).pipe(take(10));
    const result = concat(timer1, timer2, timer3);
    result.subscribe(x => console.log(x));
}
console
-----
// 依照設定顯示
01234567890123450123456789

concat 用於把 observables 組合起來,它是依照順序左至右執行放到 observer

zip

組合多個Observable以創建成一個Observable,其值根據其每個輸入Observable的值按順序計算。
https://rxjs-dev.firebaseapp.com/api/index/function/zip

將 observerble 使用 zip 和 map 將陣列值組合成 物件(Object)
ts 一直有紅底線所以改寫一下,顯示結果 和 官方網站結果相同

component.ts
-----
let age$ = of<number>(27, 25, 29);
let name$ = of<string>('Foo', 'Bar', 'Beer' , '123');
let isDev$ = of<boolean>(true, true, false);

zip(age$, name$, isDev$).pipe(
    map((array) => {
        return {age:array[0],name:array[1],isDev:array[2]}
    })
)
.subscribe(x => console.log(x));

filter

過濾項目,從來源的 observable emitting 項目滿足指定的判別
https://rxjs-dev.firebaseapp.com/api/operators/filter

component.ts
-----
const clicks = fromEvent(document, 'click');
const clicksOnDivs = clicks.pipe(filter(ev => ev.target.tagName === 'BUTTON'));
clicksOnDivs.subscribe(x => console.log(x));
console
-----
(僅點擊 HTML 是 Button 的元件 才會顯示下列數據)
MouseEvent {isTrusted: true, screenX: 268, screenY: 607, clientX: 268, clientY: 505, …}

observable 每個項目經過 判別函式,僅是讓判別為 true 的值通過並 emit,並不會改變原本的值

RxJS真的相當的多,但應該就寫到這了,最後用 HttpClient 結尾


上一篇
DAY27-Angular6之RxJS-實作1
下一篇
DAY29-Angular6之 HttpClient 基礎說明
系列文
Angular初期筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言